<template>
    <div class="tmpl">
        <div class="slide">
            <slide :imgs='imgs'></slide>
        </div>
        <div id="buy">
            <h4 v-text='info.title'></h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    市场价：
                    <s>￥{{info.market_price}}</s> 门市价：<span>￥{{info.sell_price}}</span>
                </li>
                <li>
                    购买数量：<inputNumber @dataobj='getcount'></inputNumber>
                    <transition name='show'
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:after-enter="afterEnter"
                    >
                        <div class="ball" v-show='isShow'></div>
                    </transition>
                </li>
                 <li>
                    <button type="button" class="mui-btn mui-btn-primary">立即购买</button>
                    <button @click='goShopCart' type="button" class="mui-btn mui-btn-danger">加入购物车</button>
                </li>
            </ul>
        </div>
        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间：{{info.add_time | datefmt('YYYY:MM:DD HH:mm:ss') }}</li>
            </ul>
        </div>
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+this.id}">
                <mt-button class="imgdes" type='primary' size='large'>图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+this.id}">
                <mt-button type='danger' size='large'>商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {vm,COUNTSTR} from '../../kits/vm.js';
    import common from '../../kits/common.js';
    import inputNumber from '../subcom/inputNumber.vue';
    import { Toast } from 'mint-ui';
    import slide from '../subcom/slide.vue'; //轮播图
    import {setItem,valueObj} from '../../kits/localSG.js';
    export default {
        components: {
            slide,
            inputNumber
        },
        data() {
            return {
                isShow:false,
                id: 0,
                info: {},
                imgs: [],
                inputNumber:1
            }
        },
        methods: {
            beforeEnter: function (el) {
                console.log(el);
                el.style.transform = 'translate(0px,0px)';
                // ...
            },
            // 设置过渡进入完成时的组件状态
            enter: function (el, done) {
                el.offsetWidth;
                el.style.transform = 'translate(113px,375px)';
                // ...
                done()
            },
            // 设置过渡进入完成之后的组件状态
            afterEnter: function (el) {
               this.isShow = !this.isShow;
            },
            getinfo(id) {
                var url = common.apidomain + '/api/goods/getinfo/' + id;
                this.$http.get(url).then(res => {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.info = res.body.message[0];
                })
            },
            getimgs(id) {
                var url = common.apidomain + '/api/getthumimages/' + id;
                this.$http.get(url).then(res => {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.imgs = res.body.message;
                })
            },
            getcount(count){//获取input中传入的值
                this.inputNumber = count;
            },
            goShopCart(){ 
                vm.$emit(COUNTSTR,this.inputNumber); //给公共的对象传值
                valueObj.goodsid = this.id;
                valueObj.count = this.inputNumber;
                setItem(valueObj);
                this.isShow = !this.isShow;
            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getinfo(this.id);
            this.getimgs(this.id);
        }
    }
</script>

<style scoped>
    .tmpl {
        margin-top: 45px;
    }

    .slide {
        border: 1px solid gray;
        border-radius: 5px;
        margin: 5px;
        padding: 5px;
    }

    #buy,
    #params,
    #other {
        margin: 5px;
        border: 1px solid gray;
        border-radius: 5px;
        padding: 5px;
        font-size: 12px;
    }

    #buy h4 {
        color: #0099ff;
        font-size: 14px;
    }

    #buy li,
    #params li {
        padding: 8px;
        list-style: none;
        position: relative;
    }

    .price span {
        color: red;
    }

    #other .imgdes {
        margin-bottom: 5px;
    }
    .ball{
        position: absolute;
        background-color: red;
        z-index: 100;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        top: 5px;
        left: 150px;
        transition: all 0.4s;
    }

</style>